<template>
<div>
    <div class="top">
        <div class="top-title">
            {{proInfo.title}}
        </div>
        <Menu ref="topMenu" style="flex:1;text-align:right" @on-select="selectMenu" mode="horizontal" right="true" :theme="'primary'" :active-name="aname">
            <MenuItem :name="i+''" v-for="(item,i) in menuData" :key="i">
            <Icon type="ios-paper" />
            {{item.name}}
            </MenuItem>
        </Menu>
    </div>
    <br>
    <div style="display:flex">
        <div class="menu-part">
            <Menu ref="leftmenu" style="text-align:left" :name="leftActiveName" @on-select="selectLeftMenuClick">
                <template v-for="(item,i) in leftMenuData">
                    <MenuItem v-if="!item.hasOwnProperty('child3')" :name="i+''" :key="i">{{item.name}}</MenuItem>
                    <Submenu :name="i+''" v-else>
                        <template slot="title">
                            <p> {{item.name}}</p>
                        </template>
                        <MenuItem v-for="(it,j) in item.child3" :name="i+'-'+j" :key="j">{{it.name}}</MenuItem>
                    </Submenu>
                </template>
            </Menu>
        </div>
        <div style="display:flex;flex:1">
            <div class="hello" id="test-view" ref="txt" style="height:calc(100vh - 90px);flex:1">

            </div>
            <div id="custom-toc-container" class="toc">
            </div>
        </div>
    </div>

</div>
</template>

<script>
function GetRequest(urlStr) {
    var url = decodeURI(location.search); //获取url中"?"符后的字符串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        let strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
const params = GetRequest(window.location.href);
import axios from "axios";
export default {
    name: "HelloWorld",
    props: {},
    data() {
        return {
            leftActiveName: "0",
            aname: "",
            proInfo: ProConfig,
            menuData: mdFileMenu,
            htmlStr: "",
            leftMenuData: []
        };
    },
    created() {

    },
    mounted() {
        let topId = params.tid;
        let leftId = params.lid;
        if (topId) {
            this.aname = topId;
            this.leftMenuData = this.menuData[topId].children;
            this.selectLeftMenu(leftId);
            this.$nextTick(() => {
                this.$refs.topMenu.updateActiveName();
            })
        } else {
            leftId = this.menuData[0].hasOwnProperty("child3") ? "0-0" : "0";
            window.location.replace(`${window.location.origin}${window.location.pathname}?tid=0&lid=${leftId}`)
            // this.selectMenu("0");
        }
        // this.loadMd(this.aname);
    },
    methods: {
        selectLeftMenuClick(name) {
            window.location.replace(`${window.location.origin}${window.location.pathname}?tid=${this.aname}&lid=${name}`)
        },
        selectLeftMenu(name) {
            console.log("selectLeftMenu", name + "  " + (typeof name));
            this.leftActiveName = name;
            let ids = name.split("-");
            let i = Number(ids[0]);
            if (ids.length > 1) {
                let j = Number(ids[1]);
                this.loadMd(this.leftMenuData[i].child3[j].url)
            } else {
                this.loadMd(this.leftMenuData[i].url)
            }
        },
        selectMenu(name) {
            let i = Number(name)
            let leftId = this.menuData[i].hasOwnProperty("child3") ? "0-0" : "0";
            window.location.replace(`${window.location.origin}${window.location.pathname}?tid=${name}&lid=${leftId}`)
            // this.aname = name;
            // let index = Number(name);
            // this.leftMenuData = this.menuData[index].children;
            // this.selectLeftMenu(this.leftMenuData[0].hasOwnProperty("child3") ? "0-0" : "0");
            // this.$nextTick(() => {
            //     this.$refs.leftmenu.updateActiveName();
            // })
        },
        loadMd(url) {

            axios.request({
                url: url
            }).then(res => {
                document.getElementById("test-view").innerHTML = `<textarea id="test" style="display:none;">${res.data}</textarea>`
                this.$nextTick(() => {
                    var testView = editormd.markdownToHTML("test-view", {
                        tocm: true, // Using [TOCM]
                        tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                        emoji: true,
                        taskList: true,
                        // tex: true, // 默认不解析
                        // flowChart: true, // 默认不解析
                        // sequenceDiagram: true, // 默认不解析
                    });
                });
            });
        }

    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="css">
.menu-part {
    width: 250px;
}

ul[right=true]>li {
    float: right !important;
}

.ivu-menu-primary>.ivu-menu-item-selected {
    border-bottom: 2px solid white !important;
}
</style>
<style scoped>
.top {
    display: flex;
    background: dodgerblue;
    justify-items: center;
    align-items: center;
    color: white;
    padding-bottom: 3px;
}

.top-title {
    font-size: 20px;
    padding: 0px 20px;
}

.toc {
    background: white;
    height: 100%;
    border-left: 1px solid dodgerblue;
    font-size: 16px;
    padding: 16px 36px;
    min-width: 200px;
    text-align: left;
}
</style>
